<template>
	<view>
		<!--顶部S-->
		<view class="top-box  tp-ptb0lr30 tp-bbox level_align flex_around tp-h88">
			<view class="search   tp-bbox">
				<uni-search-bar radius="100" placeholder="请输入关键字" clearButton="none" cancelButton="none" bgColor="#fff" @confirm="search" />
			</view>
			<view class="center_combo  tp-fcF tp-h88" @click="clickSearch">
				搜索
			</view>
		</view>
		<!--顶部E-->
		<!-- 列表 S -->
		<view class="list-box">
			<view class="area-box  tp-fc333 tp-fz28">
				<view class="flex">
					<view class="area-left">
						<scroll-view scroll-y="true" class="scroll-Y" style="width: 202rpx;">
							<view class="scroll-view-item center_combo" @click="changeLeft(item,index)" v-for="(item,index) in leftlist"
							 :key="index" :class="leftActive == index?'active':''">
								{{item.label}}
							</view>
						</scroll-view>
					</view>
					<view class="area-right flex-1">
						<scroll-view scroll-y="true" class="scroll-Y">
							<!-- <view class="scroll-view-item  level_align tp-ptb0lr30" @click="changeRight(item,index)" v-for="(item,index) in rightlist[leftActive]"
							 :key="index" :class="rightActive == index?'active':''">
								{{item}}
							</view> -->
							<view class="level_align flex_wrap tp-pd20">
								<view class=" tp-pr tp-mb20" style="width: 152rpx;" :style="{marginRight:(index+1)%3 == 0 ?'0':'20rpx'}" v-for="(item,index) in  rightlist[leftActive]" :key="index" @click="pageJumps('/pagesSecond/destination/destinationDetail')">
									<image class="md-img tp-br8" :src="wwwImgUrl + item.img" mode="aspectFill"></image>
									<view class="title  tp-lh54 center_combo ellispsis1">
										{{item.city}}
									</view>
								</view>
								<!-- 图片 S -->
								<view class=" tu1 tp-mt20">
									<image class="" :src="www + 'imgs/snap/tu1.png'" mode=""></image>
								</view>
								<view class="level_align tp-w100 flex_between  tp-mt20">
									<view class="tu2 ">
										<image class="" :src="www + 'imgs/snap/tu2.png'" mode=""></image>
									</view>
									<view class="tu2 ">
										<image class="" src="www + 'imgs/snap/tu3.png'" mode=""></image>
									</view>
								</view>
								<view class="tp-h98"></view>
								<view class="tp-h98"></view>
								<!-- 图片 E -->
							</view>
						</scroll-view>
					</view>
				</view>

			</view>
		</view>
		<!-- 列表 E -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftlist: [], // 选择位置区域 左边数据
				rightlist: [], // 选择位置区域	右边数据e: 0, 
				leftActive: 0, // 选择位置区域	左边被选中// 选择位置区域	左边被选中
				leftVal: '', // 选择位置区域	左边被选中的值
				rightActive: 0, // 选择位置区域	右边被选中
				rightVal: '', // 选择位置区域	右边被选中的值
			};
		},
		onLoad(opt){
			this.getList()
		},
		methods: {
			// 获取二级城市数据
			getList() {
				this.$http.get(this.$api.destinationIndex + '?type=1').then(res => {
					if (res.code === 200) {
						this.leftlist = res.data.firstList
						this.rightlist = res.data.secondList
					}
				})
			},
			// 改变区域左侧
			changeLeft(item, index) {
				this.leftActive = index
				this.leftVal = item
			},
			// 改变区域右侧
			changeRight(item, index) {
				this.rightActive = index
				this.rightVal = item
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-box {
		background: #00B4FF;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		right: 0;
		z-index: 10000;
		width: 100%;

		.dingwei {
			width: 180rpx;
			height: 56rpx;
			border-radius: 28rpx;
		}

		.dingweiimg {
			width: 28rpx;
			height: 28rpx;
		}

		.search {
			width: 600rpx;
			padding: 16rpx 0;

			/deep/ .uni-searchbar {
				height: 56rpx;
			}

			/deep/ .uni-searchbar__cancel {
				line-height: 56rpx;
			}

			/deep/ .uni-searchbar__cancel {
				color: #fff;
			}
		}
	}

	.list-box {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 88rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 176rpx;
		/* #endif */
		right: 0;
		z-index: 10000;
		width: 100%;



		.area-box {
			width: 750rpx;
			// background: #FFFFFF;

			.scroll-Y {
				/* #ifdef MP-WEIXIN */
				height: calc(100vh - 88rpx) ;
				/* #endif */
				/* #ifdef H5 */
					height: calc(100vh - 176rpx) ;
				/* #endif */
			}

			.area-left {
				width: 242rpx;

				.scroll-view-item {
					width: 100%;
					height: 100rpx;
					background: #fff;

					&.active {
						background: #F5F5F5;
						position: relative;
						color: $tc;

						&::before {
							position: absolute;
							top: 0;
							left: 0;
							content: "";
							width: 6rpx;
							height: 100rpx;
							background: #00B4FF;
						}
					}
				}
			}

			.area-right {
				.scroll-view-item {
					height: 72rpx;
					background: #FFFFFF;


					&.active {
						color: $tc;
					}

				}
			}

			.md-img {
				width: 152rpx;
				height: 140rpx;
			}

			.title {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				color: rgba(255, 255, 255, .8);
			}
			.tu1 {
				width:498rpx;
				height: 160rpx;
			}
			
			.tu2 {
				width: 240rpx;
				height: 92rpx;
			}
		}
	}
</style>
